import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
// import './index.css'
import { Provider } from "react-redux";
import App from './App.jsx';
import Print from "./Print.jsx";
import Print2 from "./Print2.jsx";
import Print3 from "./Print3.jsx";
import { store } from "./app/store";
import "./contact.css";
import ErrorPage from "./error-page";
import Contact, {
  action as contactAction,
  loader as contactLoader,
} from "./routes/contact";
import { action as destroyAction } from "./routes/destroy";
import EditContact, { action as editAction } from "./routes/edit";
import Index from "./routes/index";
import Root, {
  action as rootAction,
  loader as rootLoader,
} from "./routes/root";
// 引入组件样式
import "sv-print/dist/style.css";
import DataFlowEditor from "./DataFlowEditor/index.jsx";
import Editor from "./Editor.jsx";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage />,
        children: [
          { index: true, element: <Index /> },
          {
            path: "contacts/:contactId",
            element: <Contact />,
            loader: contactLoader,
            action: contactAction,
          },
          {
            path: "contacts/:contactId/edit",
            element: <EditContact />,
            loader: contactLoader,
            action: editAction,
          },
          {
            path: "contacts/:contactId/destroy",
            action: destroyAction,
            errorElement: <div>Oops! There was an error.</div>,
          },
        ],
      },
    ],
  },
  {
    path: "/app",
    element: <App />,
  },
  {
    path: "/print",
    element: <Print />, // element: <Print />,
  },
  {
    path: "/print2",
    element: <Print2 />,
  },
  {
    path: "/print3",
    element: <Print3 />
  },
  {
    path: "/editor",
    element: <Editor />
  },
  {
    path: "/dataflow",
    element: <DataFlowEditor />
  }
]);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    {/* <App /> */}
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </StrictMode>
);
